{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <style>
        #leftName ,#rightName{
            float: left;
            width: 350px;
            height: 300px;
        }
        #btn{
            float: left;
            width: 100px;
            height: 300px;
        }
        #toRight,#toLeft{
            margin-top:100px ;
            margin-left:30px;
            width: 50px;
        }
        .border{
            height: 300px;
            padding: 0px;
        }
    </style>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">添加监控任务</h2>
        <form class="form-horizontal" action="{{ request.path }}" method="post" >
            <div class="form-group">
                <label class="col-sm-2 control-label">name：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_name" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">task：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_tash_info" id="add_tash_info">
                        <option>--</option>
                        {% for i in task_info %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">desc：</label>
                <div class="col-sm-3">
                    <input type="text" style="width:300px;" class="form-control" name="add_desc" placeholder="描述">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">crontab_time：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_task_time">
                        <option>--</option>
                        {% for i in task_time %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group" id="label_arg_1">
                <label class="col-sm-2 control-label">监控项：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_task_point">
                        <option>--</option>
                        {% for i in task_point %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group" id="limit_status_div">
                <label class="col-sm-2 control-label" >是否有阀值：</label>
                <div class="col-sm-3">
                    <select  class="form-control" id="limit_status" name="add_limit_status">
                        <option>否</option>
                        <option>是</option>
                    </select>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-4 control-label">未添加的实例信息</label>
                <label class="col-sm-5 control-label">已添加的实例信息</label></div>
            <div class="form-group">
                <div class="form-group">
                    <div class="border">
                        <label class="col-sm-2 control-label" >请选择实例：</label>
                        <select id="leftName" multiple="multiple">
                            {% for i in ins_info %}
                                <option>{{ i.dbname }}__{{ i.conn_string }}</option>
                            {% endfor %}
                        </select>
                        <div id="btn">
                            <input type="button" id="toRight" value="-->"><br>
                            <input type="button" id="toLeft" value="<--">
                        </div>
                        <select id="rightName" multiple="multiple" name="add_ins">
                        </select>
                    </div>
                </div>
                <div class="form-group" id="sms_status_div">
                    <label class="col-sm-2 control-label" >是否发短信：</label>
                    <div class="col-sm-3">
                        <select  class="form-control" id="sms_status" name="add_sms_status">
                            <option>否</option>
                            <option>是</option>
                        </select>
                    </div>
                </div>
                <div class="form-group" >
                <label class="col-sm-4 control-label">未添加的用户信息</label>
                <label class="col-sm-5 control-label">已添加的用户信息</label></div>
            <div class="form-group">
                <div class="form-group">
                    <div class="border">
                        <label class="col-sm-2 control-label" >请选择短信联系人：</label>
                        <select id="leftName" multiple="multiple">
                            {% for i in user_info %}
                                <option>{{ i.username }}__{{ i.iphone }}</option>
                            {% endfor %}
                        </select>
                        <div id="btn">
                            <input type="button" id="toRight" value="-->"><br>
                            <input type="button" id="toLeft" value="<--">
                        </div>
                        <select id="rightName" multiple="multiple" name="add_sms_contact">
                        </select>
                    </div>
                </div>
                <div class="form-group" id="mail_status_div">
                    <label class="col-sm-2 control-label" >是否发邮件：</label>
                    <div class="col-sm-3">
                        <select  class="form-control" id="mail_status" name="add_mail_status">
                            <option>否</option>
                            <option>是</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" >是否启用：</label>
                    <div class="col-sm-3">
                        <select  class="form-control" id="enabled" name="add_enable">
                            <option>是</option>
                            <option>否</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">备注：</label>
                    <div class="col-sm-10">
                        <input type="text" style="width:300px;" class="form-control" name="add_remake" placeholder="备注">
                    </div>
                </div>
                <div class="col-sm-10">
                    {#                <button type="submit" class="btn ">提交</button>#}
                    <div style="text-align:center;vertical-align:middle;">
                        <input type="button" style="text-align:center;" class="btn"  id="all_select" value="已选择实例全标记">
                        <input type="submit" style="text-align:center;" class="btn" value="提交"></div>
                    <div style="text-align:center;vertical-align:middle;">
                        提交前记得点"已选择实例全标记",默认提交鼠标选中的实例
                    </div>
                </div>
        </form>
    </div>
{% endblock %}
{% block script %}
    <script>

        //是否有阀值
        $('#limit_status').change(function () {
            var limit_status_val = $('#limit_status').find("option:checked").val()
            if ( limit_status_val == '是' ) {
                $('#limit').remove()
                $('#limit_status_div').after(" <div class='form-group' id='limit'> <label class=\"col-sm-2 control-label\">阀值：</label><div class=\"col-sm-10\"><input type=\"text\" style=\"width:300px;\" class=\"form-control\" name=\"add_limit\" placeholder=\"阈值\"></div><div>")
            }
            else {
                $('#limit').remove()
            }
        })
        //是否发短信
        $('#sms_status').change(function () {
            var sms_status_val = $('#sms_status').find("option:checked").val()
            if (sms_status_val == '是') {
                $('#sms_conent').remove()
                $('#sms_contact').remove()
                $('#sms_status_div').after(" <div class='form-group' id='sms_conent'> <label class=\"col-sm-2 control-label\">短信内容：</label><div class=\"col-sm-10\"><input type=\"text\" style=\"width:300px;\" class=\"form-control\" name=\"add_sms_conent\" placeholder=\"短信内容\"></div><div>")
                $('#sms_status_div').after(" <div class='form-group' id='sms_contact'> <label class=\"col-sm-2 control-label\">短信联系人：</label><div class=\"col-sm-10\"><input type=\"text\" style=\"width:300px;\" class=\"form-control\" name=\"add_sms_contact\" placeholder=\"短信联系人\"></div><div>")
            }
            else {
                $('#sms_conent').remove()
                $('#sms_contact').remove()
            }
        })
        //是否发邮件
        $('#mail_status').change(function () {
            var mail_status_val = $('#mail_status').find("option:checked").val()
            if (mail_status_val == '是') {
                $('#mail_conent').remove()
                $('#mail_contact').remove()
                $('#mail_status_div').after(" <div class='form-group' id='mail_conent'> <label class=\"col-sm-2 control-label\">邮件内容：</label><div class=\"col-sm-10\"><input type=\"text\" style=\"width:300px;\" class=\"form-control\" name=\"add_mail_conent\" placeholder=\"邮件内容内容\"></div><div>")
                $('#mail_status_div').after(" <div class='form-group' id='mail_contact'> <label class=\"col-sm-2 control-label\">邮件联系人：</label><div class=\"col-sm-10\"><input type=\"text\" style=\"width:300px;\" class=\"form-control\" name=\"add_mail_contact\" placeholder=\"邮件接收人\"></div><div>")
            }
            else {
                $('#sms_conent').remove()
                $('#sms_contact').remove()
            }
        })
        //实现下拉框中内容左右选择
        $(function () {
            $("#toRight").click(function () {
                $("#rightName").append($("#leftName > option:selected"));
            });
            $("#toLeft").click(function () {
                $("#leftName").append($("#rightName > option:selected"));
            });
            //右侧侧全选
            $("#all_select").click(function () {
                $("#rightName option").prop("selected", "selected")
            });
        })
    </script>
{% endblock %}